<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
        DOM (文档对象模型)
       当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
       节点对象

       通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
        JavaScript 能够改变页面中的所有 HTML 元素
        JavaScript 能够改变页面中的所有 HTML 属性
        JavaScript 能够改变页面中的所有 CSS 样式
        JavaScript 能够对页面中的所有事件做出反应

        为了做到创建动态的 HTML这件事情，您必须首先找到需要操作元素。有三种方法来做这件事：
        通过 id 找到 HTML元素
        通过标签名找到 HTML元素
        通过类名找到 HTML元素
-->

<p id="p1">html中p1标签</p>
<p class="p2">html中p2标签</p>
<p class="p2">html中p3标签</p>


<script>
    // 通过标签名 获取节点对象  HTMLCollection  伪数组  获取后不能直接操作  需要通过索引获取具体的对象后再操作
    var ps =  document.getElementsByTagName('p')
    console.log(ps.length)
    console.log(ps[0])
    console.log(ps[1])

    // 通过id获取节点对象    返回一个节点对象   可以直接操作
    var ele =  document.getElementById('p1')
    console.log(ele)

    // 通过类名获取节点对象   HTMLCollection   伪数组
     var eles =  document.getElementsByClassName('p2')
    console.log(eles)
    console.log(eles[0])
    console.log(eles[1])
    console.log("----------querySelector('p')------------")

    //  querySelector  实现节点的获取   可能存在浏览器的兼容器  querySelector 选择首先匹配的元素   querySelectorAll 选择所有匹配元素
    // eles =  document.querySelector('.p2')
    eles =  document.querySelectorAll('.p2')
    console.log(eles)

</script>


</body>
</html>